﻿@model AutoPartsSearch.Web.ViewModels.SearchQuery.SearchQueryAdd
@using AutoPartsSearch.Domain.Entities.Enums
@using AutoPartsSearch.Web.ViewModels.SearchQuery
@{
    ViewBag.Title = @T("Самый быстрый поиск автозапчастей ").ToHtmlString();
}
<h1 class="title">@T("Самый быстрый поиск автозапчастей ")</h1>
<div id="inprogress" title="@T("Ваш запрос обрабатывается.")" style="display: none;">
    <div>
        <img alt="loading" src="~/Content/images/zoom/loading.gif" style="float: left;height: 60px;padding-right: 20px;"/>
        <p>
            @T("Пожалуйста, подождите пока Ваш запрос обработается.")
        </p>  
        <p>
            @T("Это может занять несколько секунд.")
        </p>  
    </div>
    
</div>
@using (Html.BeginForm())
{
    <div id="errors" title="@T("Пожалуйста, исправьте ошибки и попробуйте еще раз.")" style="display: none;">
        @Html.ValidationSummary(true)
        @Html.ValidationMessageFor(model => model.Parts[0].PartName)
        @Html.ValidationMessageFor(model => model.Parts[0].PartGroup)
        @Html.ValidationMessageFor(model => model.Parts[0].PartCatalogNumber)
        @Html.ValidationMessageFor(model => model.Parts[0].PartType)
        @Html.ValidationMessageFor(model => model.Parts[0].PartState)
        @Html.ValidationMessageFor(model => model.Parts[0].PartDescription)
        @Html.ValidationMessageFor(model => model.Parts[1].PartName)
        @Html.ValidationMessageFor(model => model.Parts[1].PartGroup)
        @Html.ValidationMessageFor(model => model.Parts[1].PartCatalogNumber)
        @Html.ValidationMessageFor(model => model.Parts[1].PartType)
        @Html.ValidationMessageFor(model => model.Parts[1].PartState)
        @Html.ValidationMessageFor(model => model.Parts[1].PartDescription)
        @Html.ValidationMessageFor(model => model.Parts[2].PartName)
        @Html.ValidationMessageFor(model => model.Parts[2].PartGroup)
        @Html.ValidationMessageFor(model => model.Parts[2].PartCatalogNumber)
        @Html.ValidationMessageFor(model => model.Parts[2].PartType)
        @Html.ValidationMessageFor(model => model.Parts[2].PartState)
        @Html.ValidationMessageFor(model => model.Parts[2].PartDescription)
        @Html.ValidationMessageFor(model => model.Parts[3].PartName)
        @Html.ValidationMessageFor(model => model.Parts[3].PartGroup)
        @Html.ValidationMessageFor(model => model.Parts[3].PartCatalogNumber)
        @Html.ValidationMessageFor(model => model.Parts[3].PartType)
        @Html.ValidationMessageFor(model => model.Parts[3].PartState)
        @Html.ValidationMessageFor(model => model.Parts[3].PartDescription)
        @Html.ValidationMessageFor(model => model.Parts[4].PartName)
        @Html.ValidationMessageFor(model => model.Parts[4].PartGroup)
        @Html.ValidationMessageFor(model => model.Parts[4].PartCatalogNumber)
        @Html.ValidationMessageFor(model => model.Parts[4].PartType)
        @Html.ValidationMessageFor(model => model.Parts[4].PartState)
        @Html.ValidationMessageFor(model => model.Parts[4].PartDescription)
        @Html.ValidationMessageFor(model => model.CarType)
        @Html.ValidationMessageFor(model => model.CarYear)
        @Html.ValidationMessageFor(model => model.CarBrand)
        @Html.ValidationMessageFor(model => model.CarModel)
        @Html.ValidationMessageFor(model => model.CarModelAnother)
        @Html.ValidationMessageFor(model => model.CarModification)
        @Html.ValidationMessageFor(model => model.CarVin)
        @Html.ValidationMessageFor(model => model.CarEngine)
        @Html.ValidationMessageFor(model => model.CarCase)
        @Html.ValidationMessageFor(model => model.CarTransmission)
        @Html.ValidationMessageFor(model => model.CarDrive)
        @Html.ValidationMessageFor(model => model.CarFuelType)
        @Html.ValidationMessageFor(model => model.City)
        @Html.ValidationMessageFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Phone)
        @Html.ValidationMessageFor(model => model.Phone2)
        @Html.ValidationMessageFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Comment)
    </div>
    <div class="container-main ui-corner-all">
        <div id="wizard" class="swMain">
            <ul>
                <li><a href="#step-1">
                    <label class="stepNumber">
                        1</label>
                    <span class="stepDesc">@T("Шаг") 1<br />
                        <small>@T("Данные о запчасти")</small> </span></a></li>
                <li><a href="#step-2">
                    <label class="stepNumber">
                        2</label>
                    <span class="stepDesc">@T("Шаг") 2<br />
                        <small>@T("Данные автомобиля")</small> </span></a></li>
                <li><a href="#step-3">
                    <label class="stepNumber">
                        3</label>
                    <span class="stepDesc">@T("Шаг") 3<br />
                        <small>@T("Контактные данные")</small> </span></a></li>
            </ul>
            <div id="step-1">
                <div class="StepTitle">
                    <div class="info">@T("Вы можете указать до 2 наименований запчастей в одном запросе.")</div> 
                    <span class="stepAdditionalInfo thgrey11"><span class="red">*</span> - @T("обязательное поле")</span>
                 </div>
                <table id="step1" class="table-form">
                    <tbody>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Parts[0].PartName)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Parts[0].PartName)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Parts[0].PartGroup)
                            </td>
                            <td>
                                @Html.EditorFor(x => x.Parts[0].PartGroup)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Parts[0].PartCatalogNumber)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Parts[0].PartCatalogNumber)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Parts[0].PartType)
                            </td>
                            <td>
                                @Html.EditorFor(x => x.Parts[0].PartType)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Parts[0].PartState)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Parts[0].PartState)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Parts[0].PartDescription)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Parts[0].PartDescription)
                            </td>
                        </tr>
                    </tbody>
                </table>
                @for (int i = 1; i < 2; i++)
                {
                    if (Model != null && Model.Parts.Count <= i)
                    {
                        Model.Parts.Add(new Part());
                    }
                    <table class="table-form hiddenPart" enabled="false" style="display: none;">
                        <tbody>
                            <tr>
                                <td colspan="2">
                                    <div class="container-header">
                                        <span>@T("Удалить запчасть #")@(i + 1)</span><input type="checkbox" class="hider" /></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    @Html.RequiredLabelFor(model => model.Parts[i].PartName)
                                </td>
                                <td>
                                    @Html.TextBoxFor(model => model.Parts[i].PartName)
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    @Html.RequiredLabelFor(model => model.Parts[i].PartGroup)
                                </td>
                                <td>
                                    @Html.EditorFor(x => x.Parts[i].PartGroup)
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    @Html.RequiredLabelFor(model => model.Parts[i].PartCatalogNumber)
                                </td>
                                <td>
                                    @Html.EditorFor(model => model.Parts[i].PartCatalogNumber)
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    @Html.RequiredLabelFor(model => model.Parts[i].PartType)
                                </td>
                                <td>
                                    @Html.EditorFor(x => x.Parts[i].PartType)
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    @Html.RequiredLabelFor(model => model.Parts[i].PartState)
                                </td>
                                <td>
                                    @Html.EditorFor(model => model.Parts[i].PartState)
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    @Html.RequiredLabelFor(model => model.Parts[i].PartDescription)
                                </td>
                                <td>
                                    @Html.EditorFor(model => model.Parts[i].PartDescription)
                                </td>
                            </tr>
                        </tbody>
                    </table>
                }
                <div id="addPart" class="orange bg-plus">@T("Добавить запчасть")</div>
            </div>
            <div id="step-2">
                <div class="StepTitle">
                   <div class="info">@T("Укажите информацию о вашем транспортном средстве.")</div> 
                   <span class="stepAdditionalInfo thgrey11"><span class="red">*</span> - @T("обязательное поле")</span>
                </div>
                <table id="step2" class="table-form">
                    <tbody>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarType)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarType)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarYear)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarYear, "YearDropDown")
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarBrand)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarBrand)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarModel)
                            </td>
                            <td>
                                @Html.EmptyDropDownFor(model => model.CarModel)
                                @Html.TextBoxFor(model => model.CarModelAnother, new { @class = "hide no-margin hiddenPart", enabled = "false" })
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarModification)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarModification)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarVin)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarVin)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarEngine)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarEngine)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarCase)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarCase)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarTransmission)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarTransmission)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarDrive)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarDrive)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.CarFuelType)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.CarFuelType)
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="step-3">
                <div class="StepTitle">
                   <div class="info">@T("Укажите вашу контактную информацию.")</div> 
                   <span class="stepAdditionalInfo thgrey11"><span class="red">*</span> - @T("обязательное поле")</span>
                </div>
                <table id="step3" class="table-form">
                    <tbody>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.City)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.City)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Name)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Name)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Phone)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Phone)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Phone2)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Phone2)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Email)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Email)
                            </td>
                        </tr>
                        <tr>
                            <td>
                                @Html.RequiredLabelFor(model => model.Comment)
                            </td>
                            <td>
                                @Html.EditorFor(model => model.Comment)
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
}
@section Styles{
    <link rel="stylesheet" href="~/Content/css/smart_wizard.css" />
}
@section Scripts{
    <script type="text/javascript" language="javascript" src="~/Scripts/query.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.validate-vsdoc.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript" language="javascript" src="~/Scripts/jquery.smartWizard-2.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        
            $('#errors span').empty();

            $('#CarType').change(function () {
                if ($(this).val() == 13) {
                    $("#CarCase,#CarTransmission,#CarDrive,#CarFuelType").addRequired({ text: '@T("Поле является обязательным.")' });
                } else {
                    $("#CarCase,#CarTransmission,#CarDrive,#CarFuelType").removeRequired();
                }
                $("form").validate();

            });

            $("form").validate(); //sets up the validator
            $("#CarModelAnother").rules("add", {
                required: true,
                messages: {
                    required: '@T("Поле Модель является обязательным.")'
                }
            });

            $('#addPart').click(function () {
                $('.hiddenPart:hidden:first').show();
                $('.hiddenPart:first').attr('enabled', 'true');
                $('.stepContainer').css('min-height', $("#step-1").outerHeight(true));
                if ($('.hiddenPart:hidden').length == 0) {
                    $(this).hide();
                }
            });

            $('.hider').click(function (e) {
                e.preventDefault();
                $(this).closest('.hiddenPart').hide();
                $(this).closest('.hiddenPart').attr('enabled', 'false');
                $('#addPart').show();
                $('.stepContainer').css('min-height', $("#step-1").outerHeight(true));
            });

            $("input[type='text']").addClass("ui-widget-content ui-corner-all");
            $("select,textarea").addClass("ui-corner-all");

            $("#wizard").smartWizard({
                labelNext: '@T("Продолжить")',
                labelPrevious: '@T("Назад")',
                labelFinish: '@T("Отправить")',
                onLeaveStep: function (obj) {
                    var isValid = isWizardStepValid(obj.attr('rel'));
                    if (!isValid) {
                        $("#errors").clone().show().dialog({
                            modal: true,
                            width: 500
                        });
                    }
                    return isValid;
                },
                onFinish: function () {
                    removeHiddenValidation();
                    if (isWizardStepValid('3')) {
                        $('.buttonFinish').addClass('.buttonDisabled');
                        $('#inprogress').clone().show().dialog({
                            modal: true,
                            width: 600,
                            height: 80,
                            dialogClass: "no-close noTitleStuff",
                            buttons: {},
                            resizable: false
                        });
                        $('form').submit();
                        return true;
                    } else {
                        $("#errors").clone().show().dialog({
                            modal: true,
                            width: 400
                        });
                        return false;
                    }
                }
            });


            function removeHiddenValidation() {
                $('.hiddenPart[enabled="false"]').remove();
                $("form").removeData("validator");
                $("form").removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse("form");
            }

            function isWizardStepValid(step) {
                $('#errors span').empty();
                var validator = $("form").validate({
                    ignore: ':hidden'
                });
                var isStepWithoutErrors = true;
                $('#step-' + step).find('input:visible, select:visible').not('.hider').each(function () {
                    if (!validator.element(this)) {
                        isStepWithoutErrors = false;
                    }
                });
                return isStepWithoutErrors;
            }

            $('#Parts_0__PartName,#Parts_1__PartName,#Parts_2__PartName,#Parts_3__PartName,#Parts_4__PartName')
                .dictcomplete('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.PartNames })', {
                    showParent: true,
                    change: function (event, ui) {
                        var childElementId = $(event.target).attr('id');
                        var parentElementId = childElementId.substr(0, 9) + 'PartGroup';
                        $('#' + parentElementId).val(ui.item.ParentId);
                    }
                });
            $('#Parts_0__PartGroup,#Parts_1__PartGroup,#Parts_2__PartGroup,#Parts_3__PartGroup,#Parts_4__PartGroup')
                .dictselect('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.PartGroups })', {
                    setDefault: true
                });
            $('#Parts_0__PartType,#Parts_1__PartType,#Parts_2__PartType,#Parts_3__PartType,#Parts_4__PartType')
                .dictselect('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.PartTypes })');
            $('#Parts_0__PartState,#Parts_1__PartState,#Parts_2__PartState,#Parts_3__PartState,#Parts_4__PartState')
                .dictselect('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.PartStates })');


            $('#CarType').dictselect('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.CarTypes })', {
                setDefault: true
            });
            $('#CarBrand').dictselect('@Url.Action("ByParent", "Dictionaries", new { parentId = 0 })', {
                setDefault: true,
                parentControl: $('#CarType')
            });
            $('#CarModel').dictselect('@Url.Action("ByParent", "Dictionaries", new { parentId = 0 })', {
                setDefault: true,
                parentControl: $('#CarBrand'),
                format: formatter,
                setOther: true
            });
            function formatter(item) {
                return $("<option></option>")
                            .attr("value", item.Name.Default)
                            .text(item.Name.Default);
            }

            $('#CarCase').dictselect('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.CarCases })', {
                setDefault: true
            });
            $('#CarTransmission').dictselect('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.CarTransmissions })', {
                setDefault: true
            });
            $('#CarDrive').dictselect('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.CarDrives })', {
                setDefault: true
            });
            $('#CarFuelType').dictselect('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.CarFuelTypes })', {
                setDefault: true
            });


            $('#City').dictselect('@Url.Action("ByType", "Dictionaries", new { type = DictionaryType.Cities })', {
                setDefault: true
            });

            $('#CarModel').change(function () {
                if ($(this).val() == "0") {
                    $('#CarModelAnother').removeClass("hide");
                    $('#CarModelAnother').attr('enabled', 'true');
                } else {
                    $('#CarModelAnother').addClass("hide");
                    $('#CarModelAnother').attr('enabled', 'false');
                }
            });

        });
    </script>
}
